<template>
  <div class="file page page_padding">
    <h1 class="tips">Upload</h1>

    <br />
    <h2 class="tips">选择文件</h2>
    <h3 class="tips">
      <input type="file" ref="inputer" />
      <button type="button" @click="upload">上传</button>
    </h3>
    <br />

    <h2 class="tips">上传记录</h2>
    <transition-group name="slide-fade">
      <div class="file_clip" v-for="file in allFiles" :key="file.fid">
        <h4>{{ file.fname }}</h4>

        <transition name="slide-fade">
          <div
            v-if="file?.shareKey == null"
            class="file_share_button"
            @click="() => share(file.fencodedMd5, file)"
          >
            <i class="ri-share-box-line"></i>
          </div>
          <div v-else class="file_share_code" @click="() => copy(file?.shareKey)">
            <span>{{ file?.shareKey }}</span>
            <i class="ri-file-copy-line copy"></i>
          </div>
        </transition>
      </div>
    </transition-group>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import ImageInputBox from "../components/ImageInputBox.vue";
import InputBox from "../components/InputBox.vue";
import Md5Utils from "../utils/Md5Utils.js";
import { apis } from "../api";
import { nException, nSuccess } from "../components/TipsDialog";
import { tipsPromiseHandler } from "../api";

export default {
  components: { ImageInputBox, InputBox },
  beforeRouteEnter(to, from, next) {
    apis.checkLogin(next, {
      title: "尚未登录，请登录",
      icon: to.meta.icon,
      showDuration: 5000,
    })
  },
  setup() {
    const inputer = ref(null)
    const data = reactive({
      allFiles: [],
      filename: "选择文件",
      file: null
    })

    const update = () => {
      apis.getAllFile().then(result => {
        data.allFiles = result.data.result
      })
    }

    const upload = () => {
      let file = inputer.value.files[0]

      if (file?.type != null) {
        const form = new FormData()
        form.append('file', file)

        Md5Utils.getFromFile(file).then(md5 => {
          apis.preSaveFile(md5, file?.name).then(response => {
            nSuccess((response?.data?.message) || "请求成功")
          }).catch(error => {
            nException(error.response?.data?.message || "请求失败")
            let promise = apis.saveFile(form, progressEvent => {
              data.progress = progressEvent.loaded / progressEvent.total * 100 | 0
              if (data.progress >= 100) data.progress = -1
            })
            tipsPromiseHandler(promise, update)
          })
        })
      }
    }

    const copy = (key) => {
      navigator.clipboard.writeText(key).then(() => {
        nSuccess("复制到剪贴板成功")
      }).catch(() => {
        nException("复制到剪贴板失败")
      })
    }

    const share = (md5, file) => {
      if (md5.length > 0) {
        let promise = apis.createShareKey(md5)
        tipsPromiseHandler(promise, result => file.shareKey = result.result)
      }
    }

    update()

    return { ...toRefs(data), upload, share, update, copy, inputer }
  }
}
</script>

<style lang="less">
.file {
  min-height: 100vh;
}

.file_clip {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 16px;
  position: relative;
  padding-right: 108px;
  border-radius: 10px;
  word-break: break-all;

  &:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }

  .file_share_button {
    color: black;
    position: absolute;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    width: 64px;
    height: 100%;
    right: 0;
    top: 0;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .file_share_code {
    position: absolute;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);

    width: 96px;
    height: 100%;
    font-size: 20px;
    font-family: "Lucida Console", "Courier New", monospace;
    font-weight: 900;
    text-align: center;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: gray;
    transition: all 0.3s ease;

    .copy {
      position: absolute;
      right: 3px;
      bottom: 3px;
      font-size: 16px;
    }

    &:hover {
      color: black;
    }
  }
}
</style>